<HTML>
<HEAD>
<TITLE>FDJS Dependent menus example</TITLE>

<script src="fdjs.js"></script>

<script language="JavaScript1.2">

//////////////////////////////////////////////////////////////////
//
//   FDJS Linked input Example
//   (c) Kerry Clendinning, 2007
//
//   This is a simple example to demonstrate functional declarative
//   programming in javascript, using the FDJS libary.
//
//   Licensed under the Mozilla Public License 1.1
//   http://www.mozilla.org/MPL/
//
//   This header must remain intact.
//
//   Project homepage http://code.google.com/p/fdjs/
//
//////////////////////////////////////////////////////////////////

  function dependent_menu_example() {
     //::::::::::::::::::::::::::::::::::::::::::::::::::
     //: a simple wrapper class to create the value and :
     //: visibility formula for each dependent menu     :
     //::::::::::::::::::::::::::::::::::::::::::::::::::

     function dependentMenu ( element, determobject, determvalue ) {
          this.vis = new FDJSValue ( element, 
                                     "style.visibility", 
                                     function ( ) {  
                              return FDJSDecode( determobject,
                                                 determvalue, 
                                                 "visible", 
                                                 "hidden" ) } )

        this.val = new FDJSValue( element, "value", null, "onchange" )
     }

     //::::::::::::::::::::::::::::::::::::::::::::::::::::
     //: manufacturer is dependent on domestic vs foreign :
     //::::::::::::::::::::::::::::::::::::::::::::::::::::

     whichmfr = new FDJSValue( function ( ) { 
                       return FDJSDecode(domchoose,
                                          "domestic", 
                                          domesticmfr.val, 
                                          foreignmfr.val ) })

     whichmfr.setFormulaName('whichmfr')   // add a name for logging

     //:::::::::::::::::::::::::
     //: instantiate the menus :
     //:::::::::::::::::::::::::

     domchoose   = new FDJSValue( FOREIGN_OR_DOMESTIC, "value", null, "onchange" )
     domesticmfr = new dependentMenu( DOMESTIC_MFR,  domchoose, "domestic"  )
     foreignmfr  = new dependentMenu( FOREIGN_MFR,   domchoose, "foreign"   )
     nissancar   = new dependentMenu( NISSAN_CARS,   whichmfr,   "nissan"    )
     chryslercar = new dependentMenu( CHRYSLER_CARS, whichmfr,   "chrysler"  )
     chevycar    = new dependentMenu( CHEVY_CARS,    whichmfr,   "chevrolet" )
     fordcar     = new dependentMenu( FORD_CARS,     whichmfr,   "ford"      )
     hondacar    = new dependentMenu( HONDA_CARS,    whichmfr,   "honda"     )

     //:::::::::::::::::::::::::::::::::::::::::::::::
     //: be sure to detect the dependencies, to make :
     //: the declarative relationships live          :
     //:::::::::::::::::::::::::::::::::::::::::::::::

     FDJSValue.prototype.dependTracker.detect( )
  }
</script>
  
</HEAD>
<BODY onload="dependent_menu_example(); return false">

<B>Dependent menus example</B><BR>
    <SELECT ID="FOREIGN_OR_DOMESTIC">
       <OPTION VALUE="domestic">domestic</OPTION>
       <OPTION VALUE="foreign">foreign</OPTION>
    </SELECT>
    <BR>
    <SELECT ID="DOMESTIC_MFR" STYLE="visibility:visible">
       <OPTION VALUE="ford">ford</OPTION>
       <OPTION VALUE="chrysler">chrysler</OPTION>
       <OPTION VALUE="chevrolet">chevrolet</OPTION>
    </SELECT>
    <SELECT ID="FOREIGN_MFR" STYLE="visibility:hidden; position:absolute; left=10px">
       <OPTION VALUE="honda">honda</OPTION>
       <OPTION VALUE="nissan">nissan</OPTION>
    </SELECT>
    <BR>
    <SELECT ID="FORD_CARS" STYLE="visibility:visible">
       <OPTION VALUE="mustang">mustang</OPTION>
       <OPTION VALUE="taurus">taurus</OPTION>
    </SELECT>
    <SELECT ID="CHRYSLER_CARS" STYLE="visibility:hidden; position:absolute; left=10px">
       <OPTION VALUE="lebaron">lebaron</OPTION>
       <OPTION VALUE="pt cruiser">pt cruiser</OPTION>
    </SELECT>
    <SELECT ID="CHEVY_CARS" STYLE="visibility:hidden; position:absolute; left=10px">
       <OPTION VALUE="nova">nova</OPTION>
       <OPTION VALUE="impala">impala</OPTION>
    </SELECT>
    <SELECT ID="HONDA_CARS" STYLE="visibility:hidden; position:absolute; left=10px">
       <OPTION VALUE="accord">accord</OPTION>
       <OPTION VALUE="civic">civic</OPTION>
    </SELECT>
    <SELECT ID="NISSAN_CARS" STYLE="visibility:hidden; position:absolute; left=10px">
       <OPTION VALUE="maxima">maxima</OPTION>
       <OPTION VALUE="sentra">sentra</OPTION>
    </SELECT>
  <P>
  <INPUT TYPE=SUBMIT ONCLICK="FDJSValue.prototype.setLogger( 'EVENTLOG' )" VALUE="Log Events"/>
  <PRE ID="EVENTLOG"></PRE>
</BODY>
</HTML>
